<template>
<!-- <div class="container" style="width:100%;height:100%;top:40px;position: absolute;"> -->
  <div :id="id" :option="option"  style="width:600px;height:300px"></div>
<!-- </div> -->
</template>
<script>
import HighCharts from 'highcharts'
export default {
  props: {
    id: {
      type: String
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
  },
  watch:{
    option:{
      // handler(val){
      //    this.chart = HighCharts.chart(this.id, val)
      // },
      // deep:true,
    }
  },
  data(){
    return{
      chart:null
    }
  },
  mounted() {
    this.chart = HighCharts.chart(this.id, this.option)
  },
  methods:{

  }
}
</script>

<style scoped>

</style>
